<template>
	<view class="video">
		<view class="video-content">
			<img src="@/static/img/lb.png" alt="" />
			<view class="video-info">
				<view class="video-name">
					声母训练怎样入门
				</view>
				<view class="num">
					69人观看
				</view>
			</view>
			
		</view>
		<view class="video-other">
			<view class="tabs">
				<view class="tab" :class="showTab == '1' ? 'active' :''" @click="showTab = '1'">
					章节
				</view>
				<view class="tab" :class="showTab == '2' ? 'active' :''" @click="showTab = '2'">
					简介
				</view>
			</view>
			<view class="zhangjie" v-if="showTab == '1'">
				<view class="zhangjie-list">
					<view class="zhangjie-item" :class="activeZj==index?'active':''" v-for="(item,index) in zhangjieList" :key="index">
						<text>{{item.num}}.</text>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="jianjie" v-if="showTab == '2'">
				本课程主要介绍了国家预算管理的相关基础理论以及国家预算的编制、执行及决算等预算管理理论，并通过介绍安全的形式，注重理论实际。通过对该课程的学习，使学生对国家预算管理的主要内容有一个全面的了解，并能将相关理论应用于实践。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTab:'1',
				activeZj:1,
				zhangjieList:[
					{
						num:"01",
						name:'普通话的发展历史'
					},
					{
						num:"02",
						name:'普通话的发展历史'
					},
					{
						num:"03",
						name:'普通话的发展历史'
					},
					{
						num:"04",
						name:'普通话的发展历史'
					}
				]
			}
		},
		methods: {
			handleDetail(item){
				uni.navigateTo({
					url:'/pages/learn/videoDetail'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	view {
		box-sizing: border-box;
	}
	.video {
		background: #F3F5F8;
		height: 100vh;
	}

	.video-info {
		padding: 10rpx 32rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		.video-name {
			font-size: 32rpx;
			color: #263459;
			line-height: 52rpx;
		}
		.num {
			font-size: 24rpx;
			color: #666666;
			line-height: 1;
		}
	}
	.video-other {
		background-color: #fff;
		margin-top: 16rpx;
		.tabs {
			display: flex;
			justify-content: space-around;
			border-bottom: 1px solid #F8F8F8;
			height: 88rpx;
			.tab {
				font-size: 28rpx;
				color: #666666;
				line-height: 88rpx;
				padding: 0 50rpx;
				position: relative;
			}
			.tab.active::after {
				content: '';
				width: 52rpx;
				height: 6rpx;
				background: #3D7CFD;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	
		.zhangjie {
			padding: 20rpx 0;
			.zhangjie-list {
				.zhangjie-item {
					display: flex;
					align-items: center;
					height: 88rpx;
					padding: 0 32rpx;
					color: #666666;
				}
				.zhangjie-item.active {
					color: #3D7CFD;
				}
			}
		}
	}
</style>
